$(function() {
    var $width   = $('#rectangle-width'),
        $height  = $('#rectangle-height'),
        $calc    = $('#rectangle-calc'),
        $widthvalidate   = $('rectangle-width-validate'),
        $heightvalidate  = $('rectangle-height-validate'),
        $perimeter       = $('rectangle-perimeter'),
        $area            = $('rectangle-area')

        blnValid = false;
  
    $calc.click(function() {
        //集中校验，表单级校验
        if(!validate('#rectangle-width') || !validate('#rectangle-height')) return;
        if(!blnValid) return;
  
      var width  = Number($width.val()),
          height = Number($height.val()),
          p      = roundFractional(width * 2 + height * 2, 2),
          a      = roundFractional(width * height, 2);
    
      $('#rectangle-perimeter').val(p);
      $('#rectangle-area').val(a);
    });

    $forkMeGH.show("https://gitee.com/its-cold/Rectangle1");
  
    $width.keypress(function(e) {
      filterKey(e);
    });
  
    $height.keypress(function(e) {
      filterKey(e);
    });
  
    $width.focusout(function() {
      blnValid = validate('#rectangle-width');
    });
    
    $height.focusout(function() {
      blnValid = validate('#rectangle-height')
    });
    

    // 小数点后保留n位
    function roundFractional(x, n) {
      return Math.round(x * Math.pow(10, n)) / Math.pow(10, n);
    }
  
    /**
     * 验证文本框中输入的每个字符，过滤掉非法字符
     *
     * @param e 按键事件
     * @returns {undefined}
     */
    //验证字符，过滤非法字符，字符级校验
    function filterKey(e) {
      var pos = e.target.selectionStart,
          content = e.target.value;
  
      if(/[abcdf-zABCDF-Z`~!@#$%^&*()\-=_+[\]{}|;:'",<>/?\\]/.test(e.key)) {
        e.preventDefault();
        return;
      }
  
      if(e.key === '.') {
        if(pos === 0 || content.indexOf('.') !== -1) {
          e.preventDefault();
          return;
        }
  
        if(pos  === 1 && content.substring(0,1) === '-') {
          e.preventDefault();
          return;
        }

        if( content.substring(pos-1,pos) === ' ') {
            e.preventDefault();
            return;
          }
      }
  
      if(e.key === 'e') {
        if(pos === 0 || content.indexOf('e') !== -1 
            || content.indexOf('E') !== -1) {
          e.preventDefault();
          return;
        }
  
        if(pos === 1 && content.substring(0,1) === '-') {
          e.preventDefault();
          return;
        }
        if(content.substring(pos-1,pos) === ' ') {
            e.preventDefault();
            return;
        }
      }
  
      if(e.key === 'E') {
        if(pos === 0 || content.indexOf('e') !== -1 
            || content.indexOf('E') !== -1) {
          e.preventDefault();
          return;
        }
  
        if(pos === 1 && content.substring(0,1) === '-') {
          e.preventDefault();
          return;
        }
        if(content.substring(pos-1,pos) === ' ') {
            e.preventDefault();
            return;
        }
      }


    }

    //实现字段级校验
    function validate(field) {
      var $data    = $(field),
          $message = $(field + '-validate'),
          label    = $(field).attr('data-label');
  
      if($data.val() === '') {
        $message.html(label + '不能为空！');
        $data.select();
        return false;
      }
  S
      if(window.Number($data.val()) < 0) {
        $message.html(label + '不能小于零');
        $data.select();
        return false;
      }
  
      $message.html('');
      return true;
    }


  });